<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 200px auto;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <script>
      //1.获取到这个盒子
      //2.给这个盒子绑定鼠标移动
      //3.获取鼠标的坐标值
      var box = document.querySelector('.box');
      box.addEventListener('mousemove', function (e) {
        //通过实践对象获取鼠标相对于页面的坐标信息
        /*      var x = e.pageX;
        var y = e.pageY; */
        //获取盒子距离文档左边和上边的偏移距离
        /*   var offsetLeft = this.offsetLeft 
        var offsetTop = this.offsetTop;
        //将相对于盒子的坐标位置展现到页面中
        this.innerText = `x坐标是${x - offsetLeft} y坐标是${y - offsetTop}`;   */

        var x = e.paeX - this.offsetLeft;
        var y = e.paeY - this.offsetTop;
        this.innerHTML = 'x坐标是' + x + 'y坐标是' + y;
      });
    </script>
  </body>
</html>
